<template>
  <div v-loading="loading">
    <Header v-if="isPc" :class="{PcNav:isPc}"/>
    <MHeader v-else :class="{mobileNav:!isPc}"/>
    <div class="PcSpace" v-if="isPc"></div>
    <nuxt style="max-width: 1100px;margin: 0 auto"  />
    <div class="mobileSpace" v-if="!isPc"></div>
    <transition name="slide-fade">
      <div class="to-top" @click="backToTop" v-show="showScrollToTop">
          <i class="iconfont icon-fanhuidingbu"></i>
      </div>
    </transition>
    <lg-preview></lg-preview>
  </div>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  import {getUser} from "../api/user";
  import Cookies from 'js-cookie'

  import Header from '../components/header'
  import MHeader from '../components/mHeader'

  export default {
    components: {
      Header,
      MHeader
    },
    data(){
      return{
/*        lineData: [
          {
            height: '50%',
            left: '3px',
            transform: 'rotateZ(45deg)'
          },
          {
            height: '100%',
            top: '0px',
            transform: 'rotateZ(0deg)'
          },
          {
            height: '50%',
            left: '-3px',
            transform: 'rotateZ(-45deg)'
          }
        ],*/
        showScrollToTop: false,
        loading:false,
      }
    },
    computed:{
    ...mapState('base', {
        isPc: state => state.isPc,
      }),
    ...mapState('user', {
        token: state => state.token,
      }),
    },
    // watch:{
    //   'token'(){
    //     if (Cookies.get('token')!==''){
    //         location.reload()
    //     }
    //   }
    // },
    created(){
      let vm=this;
      vm.loading=true;
      if(Cookies.get('token')){
        getUser('').then(res=>{
          vm.SET_header_image(res.data.header_image);
          vm.SET_nickname(res.data.nickname);
          vm.SET_message_num(res.data.message_num);
          vm.loading=false;
        })
      }else{
        vm.loading=false;
      }
    },
    beforeMount(){
      let vm=this;
      let clientWidth=document.body.clientWidth || document.documentElement.clientWidth;
      if(clientWidth>=1100){
        vm.SET_isPc(true);
      }else{
        vm.SET_isPc(false);
      }
      if(clientWidth>=600){
        vm.SET_showImg(true);
      }else{
        vm.SET_showImg(false);
      }
    },
    mounted(){
      let vm=this;
      // 屏幕宽度监控
      if(Cookies.get('token')){
        vm.SET_token(Cookies.get('token'));
      }else{
        vm.SET_token(null);
      }
      window.onresize=function () {
        let clientWidth=document.body.clientWidth || document.documentElement.clientWidth;
        if(clientWidth>=1100){
          vm.SET_isPc(true);
        }else{
          vm.SET_isPc(false);
        }
        if(clientWidth>=600){
          vm.SET_showImg(true);
        }else{
          vm.SET_showImg(false);
        }
      };
      window.onscroll=function () {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(scrollTop>=60) {
          vm.showScrollToTop = true;
        } else {
          vm.showScrollToTop = false;
        }
      }
    },
    methods:{
    ...mapMutations('base', [
        'SET_isPc',
        'SET_showImg'
      ]),
      ...mapMutations('user', [
        'SET_token',
        'SET_header_image',
        'SET_nickname',
        'SET_message_num'
      ]),
      backToTop(){
        window.scrollTo(0,0);
      }
    },
  }
</script>

<style lang="stylus">
  @import "../stylus/color.styl"
  html {
     font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
     font-size: 16px;
     word-spacing: 1px;
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     box-sizing: border-box;
   }
    //pc导航栏
  .PcNav{
    position fixed
    top 0
    width 100%
    left 0
    height 61px
    z-index 200
  }
  //手机导航栏
  .mobileNav{
    position fixed
    bottom 0
    width 100%
    left 0
    border-bottom 1px solid $color-border
    background-color $color-background
    z-index 200
  }
  //Pc占位div框
  .PcSpace{
    margin-top 85px
  }
  .mobileSpace{
    margin-bottom 70px
  }
  .to-top{
    width 28px
    height 28px
    background-color $color-main
    position fixed
    display flex
    align-items center
    justify-content center
    right 10px
    bottom 60px
  }
  #nprogress .bar {
    background: $color-main !important; //自定义颜色
  }
  .icon-fanhuidingbu{
    font-size 20px
    color $color-white
  }

  //返回顶部按钮动画
  .slide-fade-enter-active{
    transition: all .3s ease
  }
  .slide-fade-leave-active{
    transition: all .3s ease
  }
  .slide-fade-enter
  .slide-fade-leave-to
    transform: translateY(60px)
    opacity: 0
</style>
